<!DOCTYPE html>
<html>
<head>
    <title>Test Certificate Template Download</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        button {
            padding: 10px 15px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin: 10px 0;
        }
        button:hover {
            background-color: #45a049;
        }
        #log {
            border: 1px solid #ddd;
            padding: 10px;
            margin-top: 20px;
            background-color: #f9f9f9;
            height: 300px;
            overflow-y: auto;
        }
    </style>
</head>
<body>
    <h1>Test Certificate Template Download</h1>
    
    <div>
        <label for="templateId">Template ID:</label>
        <input type="number" id="templateId" value="1" min="1" step="1">
    </div>
    
    <div>
        <button onclick="testDirectDownload()">Test Direct Download</button>
        <button onclick="testAPIDownload()">Test API Download</button>
        <button onclick="testDirectURLAccess()">Test Direct URL Access</button>
        <button onclick="clearLog()">Clear Log</button>
    </div>
    
    <div id="log"></div>
    
    <script>
        // Log function
        function log(message) {
            const logElem = document.getElementById('log');
            const time = new Date().toLocaleTimeString();
            logElem.innerHTML += `<div>[${time}] ${message}</div>`;
            logElem.scrollTop = logElem.scrollHeight;
        }
        
        // Clear log
        function clearLog() {
            document.getElementById('log').innerHTML = '';
        }
        
        // Test direct download
        function testDirectDownload() {
            const templateId = document.getElementById('templateId').value;
            log(`Testing direct download for template ID: ${templateId}`);
            
            const url = `http://localhost:8080/qep/certificate/template/download/${templateId}`;
            log(`URL: ${url}`);
            
            const link = document.createElement('a');
            link.href = url;
            link.download = `template_${templateId}.docx`;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            
            log('Download initiated. Check your downloads folder.');
        }
        
        // Test API download
        function testAPIDownload() {
            const templateId = document.getElementById('templateId').value;
            log(`Testing API download for template ID: ${templateId}`);
            
            const url = `http://localhost:8080/qep/certificate/template/download/${templateId}`;
            log(`URL: ${url}`);
            
            fetch(url)
                .then(response => {
                    log(`Response status: ${response.status}`);
                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }
                    return response.blob();
                })
                .then(blob => {
                    log(`Downloaded blob size: ${blob.size} bytes`);
                    
                    const url = window.URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = `template_${templateId}_api.docx`;
                    document.body.appendChild(a);
                    a.click();
                    window.URL.revokeObjectURL(url);
                    document.body.removeChild(a);
                    
                    log('Download completed.');
                })
                .catch(error => {
                    log(`Error: ${error.message}`);
                });
        }
        
        // Test direct URL access
        function testDirectURLAccess() {
            const templateId = document.getElementById('templateId').value;
            log(`Testing direct URL access - template ID: ${templateId}`);
            
            // These are possible template file paths
            const urls = [
                `http://localhost:8080/profile/certificate_templates/test_template.docx`,
                `http://localhost:8080/certificate_templates/test_template.docx`,
                `http://localhost:8080/uploads/certificate_templates/test_template.docx`,
                `http://localhost:8080/D:/ruoyi/uploadPath/certificate_templates/test_template.docx`
            ];
            
            urls.forEach((url, index) => {
                log(`Testing URL ${index+1}: ${url}`);
                
                fetch(url)
                    .then(response => {
                        log(`URL ${index+1} response status: ${response.status}`);
                        if (!response.ok) {
                            throw new Error(`HTTP error! status: ${response.status}`);
                        }
                        return response.blob();
                    })
                    .then(blob => {
                        log(`URL ${index+1} downloaded blob size: ${blob.size} bytes - SUCCESS`);
                        
                        const downloadUrl = window.URL.createObjectURL(blob);
                        const a = document.createElement('a');
                        a.href = downloadUrl;
                        a.download = `template_url_${index+1}.docx`;
                        document.body.appendChild(a);
                        a.click();
                        window.URL.revokeObjectURL(downloadUrl);
                        document.body.removeChild(a);
                    })
                    .catch(error => {
                        log(`URL ${index+1} error: ${error.message}`);
                    });
            });
        }
    </script>
</body>
</html> 